<script setup lang="ts">
defineOptions({
  name: "Wiki"
});
import { useColumns } from ".";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Search from "~icons/ep/search";
import Refresh from "~icons/ep/refresh";
import Delete from "~icons/ep/delete";
import EditPen from "~icons/ep/edit-pen";
import collection from "~icons/ep/collection";
import Add from "~icons/ep/circle-plus";
import Wiki from "./addOreditWiki.vue";
import documentDialog from "./documentDialog.vue";

const {
  param,
  loading,
  columns,
  tableData,
  pagination,
  loadingConfig,
  resetParam,
  tableImageList,
  onSearch,
  dialogVisible,
  dialogTitle,
  wikiForm,
  wikiId,
  openWikiDialog,
  openDocumentDialog,
  documentVisible,
  handleSuccess,
  onSizeChange,
  onCurrentChange,
  changeTopOrPublish,
  handleSelectionChange,
  deleteBatch
} = useColumns();
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">知识库管理</div>
      </template>
      <el-form :inline="true" class="bg-bg_color">
        <el-form-item label="知识库标题：">
          <el-input
            v-model="param.title"
            placeholder="请输入知识库标题"
            clearable
          />
        </el-form-item>
        <el-form-item label="是否置顶：">
          <el-select
            v-model="param.isTop"
            placeholder="请选择是否置顶"
            clearable
            class="!w-[160px]"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否发布：">
          <el-select
            v-model="param.isPublish"
            placeholder="请选择是否发布"
            clearable
            class="!w-[160px]"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            :loading="loading"
            @click="onSearch"
          >
            搜索
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetParam">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-space class="mb-4 w-[100%] flex justify-between items-center">
        <!-- <el-button type="primary" size="small" :icon="useRenderIcon(Upload)"
        >批量导入</el-button
      > -->
        <el-button
          type="primary"
          size="small"
          :icon="useRenderIcon(Add)"
          @click="openWikiDialog()"
          >新增</el-button
        >
        <el-button
          type="danger"
          size="small"
          :icon="useRenderIcon(Delete)"
          @click="deleteBatch"
          >批量删除</el-button
        >
      </el-space>

      <pure-table
        border
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="loadingConfig"
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <template #image="{ row, index }">
          <el-image
            preview-teleported
            loading="lazy"
            :src="row.cover"
            :preview-src-list="tableImageList.map(v => v)"
            :initial-index="index"
            fit="cover"
            class="w-[160px] h-[80px]"
          />
        </template>
        <template #isTop="{ row }">
          <el-switch
            v-model="row.isTop"
            :active-value="1"
            :inactive-value="2"
            @click="changeTopOrPublish(row, 0)"
          />
        </template>
        <template #isPublish="{ row }">
          <el-switch
            v-model="row.isPublish"
            :active-value="1"
            :inactive-value="2"
            @click="changeTopOrPublish(row, 1)"
          />
        </template>

        <template #operation="{ row }">
          <div class="flex items-center justify-center gap-6">
            <component
              :is="
                useRenderIcon(EditPen, {
                  width: '20px',
                  height: '20px',
                  color: '#409EFF'
                })
              "
              @click="openWikiDialog(row)"
            />
            <component
              :is="
                useRenderIcon(collection, {
                  width: '20px',
                  height: '20px',
                  color: 'red'
                })
              "
              @click="openDocumentDialog(row)"
            />
          </div>
        </template>
      </pure-table>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      destroy-on-close
    >
      <Wiki :form-data="wikiForm" @submit-success="handleSuccess" />
    </el-dialog>
    <el-dialog v-model="documentVisible" title="编辑目录" destroy-on-close>
      <documentDialog :wikiId="wikiId" />
    </el-dialog>
  </div>
</template>
